<template>
  <view class="consultation">
    <view class="top">
      <text class="one"> 请详细描述你的病情 </text>
      <textarea
        v-model="graphicsForm.illness"
        placeholder="为了更好获得医生帮助，请尽可能详细描述病情"
      ></textarea>
    </view>
    <view class="middle">
      <checkbox
        :checked="graphicsForm.guide"
        @click="graphicsForm.guide = !graphicsForm.guide"
        >需要医生指导用药</checkbox
      >
    </view>
    <view class="pic">
      <text>上传检查报告或患处照片</text>
      <view class="piclist">
        <view class="item" v-for="(item, index) in imageList" :key="index">
          <image :src="item"></image>
          <image
            @click="deleteImg(index)"
            class="delete"
            src="../../static/删除.png"
          ></image>
        </view>
        <view class="kImg" @click="upImage">
          <image src="../../static/加.png"></image>
        </view>
      </view>
      <!-- <view class="imgg">
          <view class="imggItem" v-for="o,i in imageList" :key="i">
            <image :src="o"></image>
          </view>
        </view> -->
    </view>
    <view class="jiuzhenren">
      <text>选择就诊人</text>
      <view class="box">
        <view class="left">
          <image src="../../static/我的就诊人.png"></image>
          <text>{{ jiuzhen?.name }}</text>
        </view>
        <view class="right">
          <p class="p" @click="add">选择就诊人</p>
        </view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <button @click="cancel">取消</button>
      <button @click="subMit">提交预约</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { api } from "../../api/api";
import type { graphicsT } from "../../types/type";
const url = "https://meituan.thexxdd.cn/api" + "/upload_picture";
const graphicsForm = reactive<graphicsT>({
  illness: "",
  guide: false,
  ins_report: [],
  patient_id: "",
});
const jiuzhen = ref();
onShow(() => {
  const jiuzhen1 = uni.getStorageSync("jiuzhenInfo");
  jiuzhen.value = jiuzhen1;
});
const imageList: any = ref([]);
// 上传图片
const upImage = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album"], //从相册选择
    success: function (res) {
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name: "file",
        header: { accept: "application/json" },
        success: (uploadFileRes) => {
          imageList.value.push(JSON.parse(uploadFileRes.data).data);
        },
      });
    },
  });
};
const deleteImg = (index: number) => {
  imageList.value.splice(index, 1);
};
// 取消返回上一页面
const cancel = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const add = () => {
  uni.navigateTo({
    url: "/navPage/jiuzhenren/jiuzhenren",
  });
};
const subMit = async () => {
  graphicsForm.ins_report = imageList.value;
  graphicsForm.patient_id = jiuzhen.value._id;
  const res: any = await api.graphics(graphicsForm);
  uni.showToast({
    title: res.msg,
    icon: "none",
  });
};
</script>

<style lang="scss" scoped>
.consultation {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-around;
    button:first-child {
      background-color: #e8f2fe;
      color: #2c76ef;
      width: 250rpx;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  .kong {
    height: 200rpx;
  }
  .top {
    width: 100%;
    height: 450rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    .one {
      font-weight: 600;
    }
    textarea {
      width: 100%;
      padding: 20rpx 20rpx 0 20rpx;
      color: aqua;
    }
  }
  .middle {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 20rpx;
  }
  .pic {
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    text {
      font-weight: 600;
    }
    .piclist {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
      flex-wrap: wrap;
      .kImg {
        width: 200rpx;
        height: 200rpx;
        background-color: #f7f7f7;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
      .item {
        width: 200rpx;
        height: 200rpx;
        background-color: #f7f7f7;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        image {
          width: 200rpx;
          height: 200rpx;
        }
        .delete {
          position: absolute;
          top: 0;
          right: 0;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
  .imgg {
    display: flex;
    .imggItem {
      image {
        width: 100px;
        height: 100rpx;
      }
    }
  }
  .jiuzhenren {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;

    margin: 20rpx 0;
    text {
      font-weight: 600;
    }
    .box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0;
      .left {
        flex: 1;
        display: flex;
        align-items: center;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
      .right {
        .p {
          color: #2c76ef;
        }
      }
    }
  }
}
</style>
